<template>
  <div class="activity">
    <div class="a_new">
      <h4>最新活动</h4>
    </div>
    <div class="a_mian">
      <div v-for="(item,index) in items" :key="index">
        <div class="a_title"><a :href="'/gathering/item/'+item.id">
            <img :src="item.image" alt="">
          </a></div>
        <div class="a_contet">
          <p class="title">
            {{item.name}}
          </p>
          <div class="a_content1">
            <div class="content_l">
              <p>时间：{{item.starttime}} 周六</p>
              <p>城市：{{item.address}}</p>
            </div>
            <div class="content_r" @click="dialogVisible = true"><a href="javascript:;">立即报名</a></div>
          </div>
        </div>
      </div>

    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :total="total">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisible" @open="onOpen" @close="onClose" title="Dialog Titile">
      <el-form ref="elForm" :model="pojo" :rules="rules" size="medium" label-width="100px" label-position="top">
        <el-form-item label="选择学院" prop="college">
          <el-select v-model="pojo.college" placeholder="请选择学院" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in field102Options" :key="index" :label="item.label" :value="item.value"
              :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="理由" prop="question">
          <el-input v-model="pojo.question" placeholder="请输入理由" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
    import gatheringApi from '@/api/gathering'

    export default {
        data() {
            return {
                size: 8,
                page: 1,
                total: 50,
                item: {},
                dialogVisible: false,
                pojo: {
                    college: 2,
                    question: '',
                },
                rules: {
                    college: [{
                        required: true,
                        message: '选择学院',
                        trigger: 'change'
                    }],
                    question: [{
                        required: true,
                        message: '请输入理由',
                        trigger: 'blur'
                    }],
                },
                field102Options: [{
                    "label": "软件工程",
                    "value": 1
                }, {
                    "label": "网络工程",
                    "value": 2
                }],
            }
        },
        asyncData() {
            return gatheringApi.search(1, 8, {
                state: '1'
            }).then(res => {
                return {
                    total: res.data.data.total,
                    items: res.data.data.rows
                }
            })

        },

        methods: {
            handleCurrentChange(val) {
                this.page = val;
                gatheringApi.search(this.page, 8, {
                    state: '1'
                }).then(res => {
                    this.items = res.data.data.rows
                })
            },
            onOpen() {
                this.dialogVisible = true
            },
            onClose() {
                this.$refs['elForm'].resetFields()
            },
            close() {
                this.dialogVisible = false,
                    this.onClose();
            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    this.close()
                })
            },

        },
    }
</script>
<style>
    .activity {
        width: 1200px;
        margin: 20px auto;
        background-color: #f3f3f3;
    }

    .a_new {
        padding-top: 5px;
        width: 100%;
        height: 54px;
    }

    .a_new h4 {
        width: 100px;
        display: block;
        margin-block-start: 1.33em;
        margin-block-end: 1.33em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-left: 30px;
        margin-right: 10px;
        border-bottom: 2px solid #e64620;
        font-size: 16px;
    }

    .a_mian {
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
    }

    .a_mian>div {
        height: 283px;
        width: 24%;
        background-color: #fff;
    }

    .a_mian>div {
        margin: 0 15px 15px 0;
    }

    .a_mian>div:nth-child(4n) {
        margin: 0
    }

    .a_title {
        height: 60%;
        width: 100%;
    }

    .a_title img {
        width: 100%;
    }

    .a_contet {
        height: 40%;
        padding: 15px 10px;
    }

    .a_contet>p {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .a_content1 {
        height: 36px;
        display: flex;
    }

    .content_l {
        flex: 6;
        display: flex;
        flex-direction: column;
    }

    .content_l p {
        display: inline-block;
        line-height: 18px;
    }

    .content_r {
        flex: 4;
        line-height: 36px;
        text-align: center;
    }

    .content_r a {
        display: block;
        font-size: 14px;
        background-color: #e64620;
        color: #fff;
        border-radius: 10px;
    }

    .activity .block {
        width: 100%;
        transform: translateY(50%);
    }

    .block .el-pagination {
        transform: translateX(45%);
    }
</style>
